<template>
  <view class="user">
    <!-- 	<image class="user-bg"
			src="https://lvpaiqiche.oss-cn-hangzhou.aliyuncs.com/image/20230526/20230526165921_ruda.png"
			mode="widthFix"></image> -->
    <image class="user-bg" src="/static/user/banner.png" mode="widthFix"></image>
    <view class="user-card" @click="handLogin">
      <view class="avatar">
        <image
          :src="userinfo.avatar || 'https://lvpaiqiche.oss-cn-hangzhou.aliyuncs.com/image/20220523/20220523154705_yjgf.png'"
          mode="aspectFill"></image>
      </view>
      <view class="info" v-if="token">
        <view class="name">{{ userinfo.nickname }}</view>
        <view class="phone">{{ userinfo.id }}</view>
      </view>
      <template v-else>
        <view class="info">
          <view class="name" style="margin-top: 54rpx;">去登陆</view>
        </view>
      </template>
    </view>
    <view class="meun">
      <!-- <view class="meun-cell flex align-center" @click="handPack">
				<view class="icon">
					<image src="/static/user/icon1.png" mode=""></image>
				</view>
				<view class="name">我的大礼包</view>
				<u-icon name="arrow-right"></u-icon>
			</view> -->
      <view class="meun-cell flex align-center" @click="handCall">
        <view class="icon">
          <image src="/static/user/phone.png" mode=""></image>
        </view>
        <view class="name">客服电话</view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <!-- 快手 -->
      <view class="meun-cell flex align-center" @click="handShare" v-if="platform != 'kuaishou'">
        <view class="icon" style="width: 50rpx;height: 50rpx;flex-shrink: 1;">
          <image src="/static/user/frind.png" mode=""></image>
        </view>
        <view class="name" style="margin-left: 22rpx;font-size: 31rpx;flex-shrink: 1;">推荐给朋友</view>
        <u-icon name="arrow-right" size="26" style="margin-left: 380rpx;"></u-icon>
      </view>
      <!-- 其他 -->
      <button open-type="share" style="border: none;" v-else>
        <view style="display: flex;align-items: center;padding: 0rpx 34rpx;">
          <view class="icon" style="width: 50rpx;height: 50rpx;flex-shrink: 1;">
            <image src="/static/user/frind.png" mode=""></image>
          </view>
          <view class="name" style="margin-left: 22rpx;font-size: 31rpx;flex-shrink: 1;">推荐给朋友</view>
          <u-icon name="arrow-right" size="26" style="margin-left: 380rpx;"></u-icon>
        </view>
      </button>
      <view class="meun-cell flex align-center" @click="Go_order">
        <view class="icon">
          <image src="@/static/my_order.png" mode=""></image>
        </view>
        <view class="name">我的订单</view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <view class="meun-cell flex align-center" @click="go_set">
        <view class="icon">
          <image src="@/static/set.png" mode=""></image>
        </view>
        <view class="name">设置</view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <!-- <view v-if="token" class="meun-cell flex align-center" @click="isexit">
				<view class="icon">
					<image src="@/static/exit.png" mode=""></image>
				</view>
				<view class="name">退出登录</view>
				<u-icon name="arrow-right"></u-icon>
			</view> -->
    </view>
    <share-pop ref="share" />
    <u-modal v-model="show" @confirm='exit()' show-cancel-button content="是否确认退出登录?"></u-modal>
  </view>
</template>

<script>
import sharePop from './components/sharePop.vue'
import {
  doShop
} from "@/api/home.js"
import {
  hotLine
} from "@/api/user.js"
import {
  mapGetters
} from 'vuex'
export default {
  components: {
    sharePop
  },
  data () {
    return {
      shopInfo: {},
      cellphone: '',
      show: false,
      platform: '',
    }
  },
  computed: {
    ...mapGetters('app', {
      userinfo: 'userinfo',
      token: 'token'
    })
  },
  onLoad () {
    this.getcellphone()
    // 判断平台
    // #ifdef MP-WEIXIN
    this.platform = 'wx'
    // #endif
    // #ifdef MP-TOUTIAO
    this.platform = 'dy'
    // #endif
    // #ifdef MP-KUAISHOU
    this.platform = 'kuaishou'
    // #endif
  },
  onShareAppMessage () {
    return {
      title: `网约车从业考试 提供全国各地题库+技巧解析`,
      path: `/pages/tabbar/home/index?pid=${this.userinfo.id}`
    }
  },
  methods: {
    go_set () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/tabbar/user/components/set'
      })
    },
    isexit () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      this.show = true
    },
    exit () {

      uni.removeStorageSync('token')
      this.$store.commit('app/SETUSERINFO', {})
      this.$store.commit('app/setToken', '')
      uni.showToast({
        title: '退出登录成功',
        icon: 'none'
      })
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/tabbar/home/index'
        })
      }, 400)
    },
    //客服电话
    async getcellphone () {
      const {
        data
      } = await hotLine()
      this.cellphone = data
    },
    async getShopInfo () {
      const {
        data
      } = await doShop()
      this.shopInfo = data
    },
    Go_order () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/order/index'
      })
    },
    handPack () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/user/pack'
      })
    },
    handLogin () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
    },
    handCall () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      uni.makePhoneCall({
        phoneNumber: this.cellphone
      })
    },
    handShare () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      this.$refs.share.showEdit()
    }
  }
}
</script>

<style lang="scss" scoped>
.user {
  &-bg {
    width: 750rpx;
    height: auto;
    display: block;
  }

  .user-card {
    margin: -150rpx auto 0 auto;
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    position: relative;
    z-index: 2;
    padding: 0 40rpx 40rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar {
      width: 174rpx;
      height: 174rpx;
      border-radius: 50%;
      background-color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: -62rpx;

      image {
        width: 126rpx;
        height: 126rpx;
        border-radius: 50%;
      }
    }

    .info {
      margin-left: 24rpx;
      flex: 1;
      padding-top: 80rpx;
      text-align: center;

      .name {
        margin-top: 38rpx;
        font-size: 36rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .phone {
        margin-top: 10rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }

  .meun {
    width: 702rpx;
    margin: 20rpx auto 0 auto;
    // background-color: #FFFFFF;
    // border-radius: 20rpx;
    // padding: 30rpx 0;

    &-cell {
      padding: 20rpx 34rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx;

      &:not(:first-child) {
        margin-top: 24rpx;
      }

      .icon {
        image {
          width: 50rpx;
          height: 50rpx;
        }
      }

      .name {
        margin-left: 22rpx;
        font-size: 31rpx;
        flex: 1;
      }
    }
  }
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background-color: rgba(255, 255, 255, 0);

  &::after {
    border: none;
  }

  &-cell {
    // padding: 20rpx 34rpx;

    .icon {
      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .name {
      margin-left: 22rpx;
      font-size: 31rpx;
      flex: 1;
    }
  }
}

button {
  box-shadow: none;
}
</style>